page{
  background-color: white;
}
.woprogress{
  padding-bottom: 40rpx;

  &-card{
    background-color: #ffffff;
    box-shadow: 0px 0px 8rpx 0px 
      rgba(0, 0, 0, 0.2);
    border-radius: 4rpx;
    margin: 0 40rpx;
    margin-top: -85rpx;
    position: relative;
    z-index: 2;

    &__no{
      color: #404040;
      font-size: 20rpx;
      font-weight: normal;
    }

    &__desc{
      position: absolute;
      right: 20rpx;
      font-size: 30rpx;
      color: #3d85db;
    }

    &__divider{
      height: 1px;
      background-color: #cccccc;
      margin: 0 20rpx;
      transform: scaleY(.5);
    }
    &__head{
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 150rpx;
      padding: 0 20rpx;
    }
    &__body{
      padding: 30rpx 20rpx;
      padding-top: 0;
    }

    &__remark{
      height: 200rpx;
      background-color: #eeeeee;
      border-radius: 4rpx;
      width: 100%;
      font-size: 20rpx;
      box-sizing: border-box;
      padding: 20rpx;
      &::placeholder{
        color: #808080;
      }
    }

    &__content1{
      margin-top: 10rpx;
    }

    &__col{
      display: flex;
      flex-direction: column;
      width: 100%;
      padding-left: 16rpx;

      &-row{
        display: flex;
        flex-direction: row;
        align-items: center;
      }
      &-time{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #3d85db;
        font-size: 20rpx;
        font-weight: 300;
        margin-top: 10rpx;
      }
    }
  }


}

.timeline{
  display: flex;
  flex-direction: row;
  display: flex;
  flex-direction: column;
  position: relative;
  &::after{
    content: "";
    width: 1px;
    position: absolute;
    top: -10rpx;
    bottom: 40rpx;
    background-color: #cccccc;
    left: 116rpx;
  }
  &-item{
    padding-left: 160rpx;
    margin-bottom: 40rpx;
    position: relative;

    &__time{
      position: relative;
    }

    &.active{

      .timeline-item__title,
      .timeline-item__desc{
        color: white;
      }
      .timeline-item__card{
        background-color: #3d85db;
      }
      .timeline-item__dot{
        background-color: #3d85db;
      }
      .timeline-item__time{
        color: #3d85db;
      }
    }
    &__card{
      border-radius: 4rpx;
      padding: 20rpx;
      background-color: #eeeeee;
      color: #404040;
      display: flex;
      flex-direction: column;
    }
    &__time{
      position: absolute;
      left: 0rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      font-size: 20rpx;
      text-align: right;
      top: 30rpx;
      color: #202020;
    }
    &__dot{
      width: 24rpx;
      height: 24rpx;
      border-radius: 50%;
      background-color: #ffffff;
      border: solid 1px #3d85db;
      position: absolute;
      left: 104rpx;
      z-index: 1;
      top: 40rpx;
    }
    &__title{
      color: #202020;
      font-size: 24rpx;
    }
    &__desc{
      font-size: 20rpx;
      margin-top: 12rpx;
      line-height: 1.6;
    }
  }
}
